<template>
  <div class="page-home">
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="id" label="id"> </el-table-column>
      <el-table-column prop="email" label="email" width="180">
      </el-table-column>
      <el-table-column prop="passwd" label="passwd"> </el-table-column>
      <el-table-column prop="website" label="website"> </el-table-column>
      <el-table-column prop="secret" label="secret" width="180">
        <template slot-scope="scope">
          <el-input
            @keyup.enter.native="submit(scope.row)"
            size="mini"
            v-if="scope.row.isEdit"
            v-model="editObj.secret"
            placeholder="请输入内容"
          />
          <span v-else>{{ scope.row.secret }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="code" label="code">
        <template slot-scope="scope">
          <el-button v-if="!scope.row.code" class="copy" size="mini" plain @click="getCode(scope.row)" data-clipboard-text="scope.row">获取code</el-button>
          <span v-else>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" plain @click="edit(scope.row)">修改</el-button>
          <el-button size="mini" type="primary" plain @click="submit(scope.row)"
            >提交</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { get, post } from '../http.js';
export default {
  name: "Home",
  data() {
    return {
      tableData: [],
      code: {},
      editObj: {
        secret: "",
      },
    };
  },
  mounted: async function () {
    const tableData = await get('http://47.253.43.215:5000/user/list')
    tableData.map((item) => {
      item.isEdit = false;
      item.code = '';
      return item;
    });
    this.tableData = tableData;
    // 模拟轮询接口
    await new Promise((res) => {
      setInterval(async () => {
        const tableData = await get('http://47.253.43.215:5000/user/list')
        tableData.map((item) => {
          item.isEdit = false;
          item.code = '';
          return item;
        });
        this.tableData = tableData;
        res();
      }, 6000);
    });
  },
  methods: {
    getCode: async function (row) {
      const data = new FormData();
      data.append('secret', row.secret)
      const resp = await post('http://47.253.43.215:5000/getcode', data)
      row.code = resp.secret
      const textarea =document.createElement('textarea');
      document.body.appendChild(textarea)
      textarea.value = resp.secret
      textarea.select();
      document.execCommand("Copy"); 
      document.body.removeChild(textarea)
    },
    edit: function (row) {
      this.tableData.map((item) => {
        item.isEdit = false;
        return item;
      });
      row.isEdit = true;
      this.editObj.secret = row.secret;
    },
    submit: async function (row) {
      const { secret } = row;
      await post('http://47.253.43.215:5000/getcode', { secret })
      row.isEdit = false;
      row.secret = this.editObj.secret;
    },
  },
};
</script>

<style lange="less" scoped>
.page-home {
  width: 1200px;
  margin: 0 auto;
}
</style>
